$system-typescale-headline-font: "Rubik";

$system-typescale-display-font: "Rubik";
$system-typescale-display-weight: Regular;
$system-typescale-display-size: 1rem;
$system-typescale-display-lineHeight: 1.25;
$system-typescale-display-tracking: 0px;

$system-typescale-body-font: "Rubik";
$system-typescale-body-weight: Regular;
$system-typescale-body-size: $reference-typescale-baseSize;
$system-typescale-body-lineHeight: 1.5;
$system-typescale-body-tracking: 0.5px;

//? LAYOUT
$system-layout-breakpoint: 64rem;
$system-layout-curve: 1rem;

//? VIEWPOINT

$system-viewpoint-mobile-S: 320px;
$system-viewpoint-mobile-M: 360px;
$system-viewpoint-mobile-L: 400px;
$system-viewpoint-mobile-XL: 640px;
$system-viewpoint-tablet: 768px;
$system-viewpoint-desktop-S: 1024px;
$system-viewpoint-desktop-M: 1440px;
$system-viewpoint-desktop-L: 1920px;
$system-viewpoint-4K: 2560px;

//? COLOR

//? accent colors
//* primary
$system-color-primary-100: hsl($reference-color-hue-green, $reference-color-baseSaturation, 100%);
$system-color-primary-99: hsl($reference-color-hue-green, $reference-color-baseSaturation, 99%);
$system-color-primary-95: hsl($reference-color-hue-green, $reference-color-baseSaturation, 95%);
$system-color-primary-90: hsl($reference-color-hue-green, $reference-color-baseSaturation, 90%);
$system-color-primary-80: hsl($reference-color-hue-green, $reference-color-baseSaturation, 80%);
$system-color-primary-70: hsl($reference-color-hue-green, $reference-color-baseSaturation, 70%);
$system-color-primary-60: hsl($reference-color-hue-green, $reference-color-baseSaturation, 60%);
$system-color-primary-50: hsl($reference-color-hue-green, $reference-color-baseSaturation, 50%);
$system-color-primary-40: hsl($reference-color-hue-green, $reference-color-baseSaturation, 40%);
$system-color-primary-30: hsl($reference-color-hue-green, $reference-color-baseSaturation, 30%);
$system-color-primary-20: hsl($reference-color-hue-green, $reference-color-baseSaturation, 20%);
$system-color-primary-10: hsl($reference-color-hue-green, $reference-color-baseSaturation, 10%);
$system-color-primary-00: hsl($reference-color-hue-green, $reference-color-baseSaturation, 0%);

//* secondary
$system-color-secondary-100: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 100%);
$system-color-secondary-99: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 99%);
$system-color-secondary-95: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 95%);
$system-color-secondary-90: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 90%);
$system-color-secondary-80: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 80%);
$system-color-secondary-70: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 70%);
$system-color-secondary-60: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 60%);
$system-color-secondary-50: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 50%);
$system-color-secondary-40: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 40%);
$system-color-secondary-30: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 30%);
$system-color-secondary-20: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 20%);
$system-color-secondary-10: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 10%);
$system-color-secondary-00: hsl($reference-color-hue-blue, $reference-color-baseSaturation, 0%);

//? neutral
$system-color-neutral-100: hsl($reference-color-hue-green, 15%, 100%);
$system-color-neutral-99: hsl($reference-color-hue-gray, 15%, 99%);
$system-color-neutral-95: hsl($reference-color-hue-gray, 15%, 95%);
$system-color-neutral-90: hsl($reference-color-hue-gray, 15%, 90%);
$system-color-neutral-80: hsl($reference-color-hue-gray, 15%, 80%);
$system-color-neutral-70: hsl($reference-color-hue-gray, 15%, 70%);
$system-color-neutral-60: hsl($reference-color-hue-gray, 15%, 60%);
$system-color-neutral-50: hsl($reference-color-hue-gray, 15%, 50%);
$system-color-neutral-40: hsl($reference-color-hue-gray, 15%, 40%);
$system-color-neutral-30: hsl($reference-color-hue-gray, 15%, 30%);
$system-color-neutral-20: hsl($reference-color-hue-gray, 15%, 20%);
$system-color-neutral-10: hsl($reference-color-hue-gray, 15%, 10%);
$system-color-neutral-00: hsl($reference-color-hue-gray, 15%, 0%);

//? ui
$system-color-primary: $reference-color-green-50;
$system-color-onPrimary: $reference-color-green-100;
$system-color-primaryContainer: $reference-color-green-90;
$system-color-onPrimaryContainer: $reference-color-green-10;

$system-color-secondary: $reference-color-gray-50;
$system-color-onSecondary: $reference-color-gray-100;
$system-color-secondaryContainer: $reference-color-gray-90;
$system-color-onSecondaryContainer: $reference-color-gray-10;

$system-color-error: $reference-color-red-50;
$system-color-onError: $reference-color-red-100;
$system-color-errorContainer: $reference-color-red-90;
$system-color-onErrorContainer: $reference-color-red-10;

$system-color-outline: $reference-color-gray-80;
$system-color-background: $reference-color-gray-99;
$system-color-onBackground: $reference-color-gray-10;
$system-color-surface: $reference-color-gray-99;
$system-color-onSurface: $reference-color-gray-80;

$system-color-text: $reference-color-gray-10;
